/**
 * Comments
 */

#comments {
	padding-top: 2.618em;

	.comments-title {
		border-bottom: 1px solid $color_border;
		padding-bottom: .53em;
		margin-bottom: 1.618em;
	}

	.comment-list {
		list-style: none;
		margin-left: 0;

		.comment-body {
			@include clearfix;
		}

		.comment-content {
			padding-bottom: 1.618em;
			margin-bottom: 1.618em;

			.comment-text {
				padding: 1.618em;
				border-radius: 3px;

				p:last-child {
					margin-bottom: 0;
				}
			}
		}

		.comment-meta {
			margin-bottom: 1em;
			
			.avatar {
				margin-bottom: 1em;
				max-width: 64px;
				height: auto;
			}

			a.comment-date {
				font-size: .857em;
			}

			cite {
				font-style: normal;
				clear: both;
				display: block;
			}
		}

		.bypostauthor {
			> .comment-body cite {
				&:after {
					@include fa-icon();
					margin-left: .53em;
					content: "\f0f6";
				}
			}
		}

		.reply {
			@include clearfix;
			margin-bottom: 1.618em;
			padding-top: .618em;

			a {
				display: inline-block;
				margin-right: 1em;

				&:after {
					@include fa-icon();
					content: "\f112";
					margin-left: .53em;
				}

				&.comment-edit-link {
					&:after {
						content: "\f040";
					}
				}

				&:last-child {
					margin-right: 0;
				}
			}
		}

		.children {
			list-style: none;
		}
	}
}

.comment-content a {
	word-wrap: break-word;
}

#respond {
	clear: both;
	padding: 1.618em;
	background-color: rgba(0,0,0,0.0125);
	position: relative;

	.comment-form-author,
	.comment-form-email,
	.comment-form-url {
		input {
			width: 100%;
		}
	}

	.form-submit,
	form {
		margin-bottom: 0;
	}

	#cancel-comment-reply-link {
		position: absolute;
		top: .53em;
		right: .53em;
		display: block;
		height: 1em;
		width: 1em;
		overflow: hidden;
		line-height: 1;
		font-size: 1.387em;
		text-align: center;
		@include transition(transform,ease,.3s);

		&:hover {
			@include transform(scale(1.3));
		}

		&:before {
			@include fa-icon();
			content: "\f057";
			display: block;
		}
	}
}


@include susy-media($desktop) {
	.comment-list {
		@include clearfix;

		.comment {
			clear: both;
		}

		.comment-meta {
			@include span(2 of 9);
			text-align: right;

			.avatar {
				float: right;
			}
		}

		.comment-content {
			padding-bottom: 3.631em;
			margin-bottom: 3.631em;
		}

		.comment-content,
		#respond {
			@include span(last 7 of 9);
		}

		#respond {
			float: right;
			.comment-form-author,
			.comment-form-email,
			.comment-form-url {
				width: 100%;
				margin-right: 0;
			}
		}

		.comment-body {
			#respond {
				box-shadow: 0 6px 2em rgba(#000,.2);
				margin-bottom: 2.618em;
				margin-top: -1.618em;
			}
		}

		.reply {
			clear: both;
			text-align: right;
		}

		ol.children {
			@include span(last 8 of 9);
			list-style: none;

			.comment-meta {
				@include span(2 of 8);
			}

			.comment-content,
			#respond {
				@include span(last 6 of 8);
			}

			ol.children {
				@include span(last 7 of 8);

				.comment-meta {
					@include span(2 of 7);
				}

				.comment-content,
				#respond {
					@include span(last 5 of 7);
				}

				ol.children {
					@include span(last 6 of 7);

					.comment-meta {
						@include span(2 of 6);
					}

					.comment-content,
					#respond {
						@include span(last 4 of 6);
					}

					ol.children {
						@include span(last 5 of 6);

						.comment-meta {
							@include span(2 of 5);
						}

						.comment-content,
						#respond {
							@include span(last 3 of 5);
						}
					}
				}
			}
		}
	}

	#respond {
		padding: 2.618em;

		.comment-form-author,
		.comment-form-email,
		.comment-form-url {
			@include span(3 of 9);
		}

		.comment-form-url {
			@include last;
		}

		.comment-form-comment {
			clear: both;
		}
	}
}
